<template>
  <div>
    <div class="row">
      <div class="col-md-12" style="background: #fff;">
        <div class=" focusNone type">
          <div class="portlet box grey-cascade">
            <div class="portlet-body">
              <ul class="nav nav-tabs">
                <li>
                  <router-link to="/jcxx" tag="a">
                     基础设置
                  </router-link>
                </li>
                <li>
                  <router-link to="/wrts" tag="a" class="">
                     无人处理推送
                  </router-link>
                </li>
                <li class="active">
                  <router-link to="/bslx" tag="a" class="">
                     类型及项目
                  </router-link>
                </li>
              </ul>
              <div class="row" style="position: relative;left: 15px;top: 15px;">
                <div class="col-md-12">
                  <div class="portlet box grey-cascade" style="min-height: auto !important;">
                    <transition name="fade">
                      <Loading :listLoading.sync="loading"></Loading>
                    </transition>
                    <div class="portlet-title">
                      <div class="cz">
                        <router-link to="/bslx" class="btn green" tag="a">
                           报事类型管理
                        </router-link>
                        <router-link to="/bxlx" class="btn green active" tag="a">
                           报修类型管理
                        </router-link>
                        <router-link to="/bxlb" class="btn green" tag="a">
                           报修类别管理
                        </router-link>
                        <button style="margin-right: -10px;" class="btn green"   data-toggle="modal" href="#addPush">新增 <i class="fa fa-plus"></i></button>
                      </div>
                    </div>
                    <div class="portlet-body">
                      <div class="row color mbStyle">
                        <div class="col-md-2 mb10" style="padding-left: 0;left: 0;">
                          <div class="search">
                             <input type="text" class="form-control" placeholder="请输入关键字">
                          </div>
                        </div>
                        <div class="col-md-1 mb10" style="position: relative;top: 2px;left: 5px;">
                          <div class="search">
                            <button class="btn green">查询 <i class="fa fa-search"></i></button>
                            </div>
                          </div>
                        </div>
                      <div class="tableDiv">
                        <el-table
                          ref="multipleTable"
                          :data="list"
                          :border = true
                          :stripe = true
                          :row-class-name="tableRowClassName"
                          style="width: 100%"
                          @selection-change="handleSelectionChange">
                          <el-table-column
                            type="selection"
                            width="55">
                          </el-table-column>
                          <el-table-column
                            label="序号"
                            :formatter="formatter"
                            width="100"
                            >
                          </el-table-column>
                         
                          <el-table-column
                            prop="role_name"
                            label="类型名称"
                            >
                          </el-table-column>
                          <el-table-column
                            prop=""
                            label="类型编号"
                            >
                          </el-table-column>
                          <el-table-column
                            prop=""
                            label="类型说明"
                            >
                          </el-table-column>
                          <el-table-column
                            label="操作"
                            width="200">
                            <template scope="scope">
                              
                              <el-button type="text" data-toggle="modal" href="#modifly" class="modifly" size="small">编辑</el-button> 
                              <!-- <el-button type="text"  data-toggle="modal" href="#delete" @click="deleteData(scope.row,scope.$index)" class="delete" size="small">删除</el-button> -->
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="block">                    
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 15]"
                            :page-size="page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                          </el-pagination>
                        </div>
                      </div>
                    </div>
                  </div>  
                </div>
                <div class="col-md-12" style="position: relative;margin: 0px 0 20px;">
                  <div style="position: relative;left: 22px;">
                    <button type="button""@click="saveData($event)" class="btn blue">保存设置</button>
                    
                    <router-link to="/sbsjList" tag="a" class="btn default">
                      恢复默认设置
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <!-- 新增推送规则开始 -->
    <div id="addPush" class="modal fade" data-width="500">
      <div class="modal-title">
        <p>
          推送规则新增
        </p>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12 l10">
            <div class="col-md-3 l10">
              <span class="require">*</span>
              类型名称 :
            </div>
            <div class="col-md-9">
              <input type="text" class="form-control" placeholder="类型名称">
            </div>
            <span class="errorInfor errorAddress hide">不能为空</span>
          </div>
          <div class="col-md-12 l10">
            <div class="col-md-3 l10">
              <span class="require">*</span>
              类型编号 :
            </div>
            <div class="col-md-9">
              <input type="text" class="form-control" placeholder="类型编号">
            </div>
            <span class="errorInfor errorAddress hide">不能为空</span>
          </div>
          <div class="col-md-12">
            <div class="col-md-3" style="font-weight: 500;color: #666;">
              类型说明 :
            </div>
            <div class="col-md-9" style="font-weight: 500;color: #333;">
              <textarea v-model="extra_desc" class="form-control" rows="3" :readonly="is_modifly" style="resize: none;" placeholder="类型说明"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
      </div>
    </div>
    <!-- 新增推送规则结束 -->
    <!-- 编辑推送规则开始 -->
    <div id="modify" class="modal fade" data-width="500">
      <div class="modal-title">
        <p>
          推送规则新增
        </p>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12 l10">
            <div class="col-md-3 l10">
              <span class="require">*</span>
              类型名称 :
            </div>
            <div class="col-md-9">
              <input type="text" class="form-control" placeholder="类型名称">
            </div>
            <span class="errorInfor errorAddress hide">不能为空</span>
          </div>
          <div class="col-md-12 l10">
            <div class="col-md-3 l10">
              <span class="require">*</span>
              类型编号 :
            </div>
            <div class="col-md-9">
              <input type="text" class="form-control" placeholder="类型编号">
            </div>
            <span class="errorInfor errorAddress hide">不能为空</span>
          </div>
          <div class="col-md-12">
            <div class="col-md-3" style="font-weight: 500;color: #666;">
              类型说明 :
            </div>
            <div class="col-md-9" style="font-weight: 500;color: #333;">
              <textarea v-model="extra_desc" class="form-control" rows="3" :readonly="is_modifly" style="resize: none;" placeholder="类型说明"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
      </div>
    </div>
    <!-- 编辑推送规则结束 -->
  </div>
  
</template>  

<style scoped>

    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.style .col-md-3{text-align: center;height: 100px;line-height: 100px;}
    .row.style .col-md-3 a{color:#333;font-size: 16px;font-weight: 500;}
    p {margin: 0 0 10px;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .row.m0{margin: 0;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .col-md-6.color,.col-md-12.l10 {
        margin-bottom: 10px;
    }
    .col-md-12.l10 .col-md-3{position: require;left: -10px;}
    .col-md-12.l10 input{width: 100% !important;}
    .focusNone .col-md-12 {left: 0 !important;}
</style>

<script>

  import Metronic from '../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import optVue from '../../../../config/optVue.js';
  export default {
     data(){
      return{
        list:[],
        title:"",
        num:"",
        num1:"",
        value1: true,
        value2: true,
        is_remind:false,
        order_level:null,
        order_list:[],
        detail:[]
      }
    },
    components: {
    },
    mounted(){
      document.title = '系统设置';
      this.title = document.title
      $(".backstretch").remove();
      optVue.sbwbjg(this);

    },
    methods:{
      handleChange(value) {
        console.log(value);
      },
      handleChangeqd(value) {
        console.log(value);
      },
      changeSelect:function(select){

      }
    }

  }

</script>  



